<template>
  <view>
    <view
      class="coupon-item"
      :class="item.status > 0 ? 'use-less' : ''"
      v-for="(item, index) in list"
      :key="index"
    >
      <view class="date-price flex-x-sb flex-y-center">
        <view>
          <view class="title">{{ item.name }}</view>
          <view class="date" v-if="item.expire_type == 1"
            >{{ $t("facePay.getted")
            }}{{
              item.expire_day == 0
                ? $t("member.permanent")
                : item.expire_day + $t("coupon.date2")
            }}</view
          >
          <view class="date" v-else
            >{{ item.begintime }}-{{ item.endtime }}</view
          >
        </view>
        <view class="price-box flex-col flex-y-center">
          <!-- 满减卷 -->
          <template v-if="item.discount_type == 2">
            <view
              >￥<text style="font-size: 56rpx">{{
                item.sub_price
              }}</text></view
            >
            <view>
              {{ $t("coupon.price1") }}{{ item.min_price
              }}{{ $t("coupon.price2") }}
            </view>
          </template>
          <!-- 打折卷 -->
          <template v-else-if="item.discount_type == 1">
            <view
              ><text style="font-size: 56rpx">{{ item.discount }}</text
              >{{ $t("clerk.member2") }}</view
            >
            <view>{{ item.min_price_desc }}</view>
          </template>
        </view>
      </view>

      <view class="note flex-x-sb">
        <view class="left">
          <u-collapse
            class="collapse"
            ref="collapse"
            v-if="item.rule"
            :head-style="{
              padding: 0,
              lineHeight: '48rpx',
              color: '#666',
              fontSize: '24rpx',
            }"
            :body-style="{
              fontSize: '24rpx',
              color: '#999',
            }"
          >
            <u-collapse-item title="详细信息">
              {{ item.rule }}
              <view class="shareUser" v-if="item.give_user_info">
                <text>转赠人：</text>
                <text>{{item.give_user_info.name}}</text>
              </view>
            </u-collapse-item>
          </u-collapse>
          <!-- <view v-else class="share-info">
            <text>赠送人：</text>
            <view class="user-info">
              <image src="" mode="" />
              <text>哈哈哈哈</text>
            </view>
          </view> -->
        </view>
        <view v-if="isButton" class="btn-groups">
          <view
            class="use-btn"
            v-if="item.is_receive == 0"
            @click="onReceive(item)"
            >{{ $t("coupon.toGet") }}</view
          >
          <view
            class="go-with"
            v-else-if="item.status == 0"
            @click="onClickUse(item)"
            >{{ $t("facePay.toUse") }}</view
          >
          <view
            v-if="item.can_send == 1 && item.give_user_id == 0"
            class="use-btn"
            @click="onGive(item.user_coupon_id)" 
          >
            {{ $t("facePay.increase") }}
            <!--  #ifdef  MP-WEIXIN -->
            <button open-type="share" :data-id="item.user_coupon_id"></button>
            <!--  #endif -->
          </view>
        </view>
      </view>

      <view
        v-if="isStatus"
        class="status"
        :class="item.status > 0 ? 'disabled' : ''"
      >
        <view v-if="item.status == 0">{{ $t("coupon.noUse") }}</view>
        <view v-else-if="item.status == 1">{{ $t("coupon.used") }}</view>
        <view v-else-if="item.status == 2">{{ $t("coupon.expire") }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //优惠券列表
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示优惠券里的button
    isButton: {
      type: Boolean,
      default: false,
    },
    //优惠券使用状态是否显示
    isStatus: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dateFilter() {
      return function (str) {
        return this.$utils.turnDate(str * 1000 || 0, "yyyy-mm-dd");
      };
    },
  },
  methods: {
    gotoSend(item) {
      this.$emit("giveOther", { item });
    },
    async onReceive(item) {
      this.currentItem = item;
      try {
        const res = await this.$allrequest.coupon.receiveConpon({
          id: item.id,
        });
        if (res.code == 0) {
          this.isShowMask = true;
          this.getListData();
          this.$emit("getListData");
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
    onClickUse(item) {
      this.$utils.toUrl("/pages/home/home", "switchtab");
    },
    // 赠送好友
    onGive(id) {
      // #ifdef APP-PLUS
      uni.share({
        provider: "weixin",
        type: 0,
        href: "/user/my_coupon/get_coupon?id=" + id,
        scene: "WXSceneSession",
        title: '赠送优惠券',
        imageUrl: ''
      });
      // #endif
    }
  },
};
</script>
<style lang="scss">
.coupon-item {
  /deep/.u-iconfont {
    color: #8c8c8c !important;
  }
  /deep/.u-collapse-head {
    justify-content: flex-start;
    line-height: 48rpx;
    padding: 0;
    color: #8c8c8c;
  }
  /deep/.u-collapse-title {
    flex: initial;
    font-size: 24rpx;
    color: #8c8c8c;
  }
  /deep/.u-collapse-content {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}
</style>

<style lang="scss" scoped>
$bgcolor: #f2f2f2;
.coupon-item {
  position: relative;
  margin: 0 24rpx;
  margin-bottom: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  .date-price {
    padding: 30rpx;
    > view:nth-child(1) {
      flex: 1;
      width: 0;
      .title {
        font-size: 30rpx;
        font-weight: 600;
      }
      .date {
        margin-top: 12rpx;
        font-size: 22rpx;
        color: #8c8c8c;
      }
    }
    .price-box {
      > view:nth-child(1) {
        font-size: 28rpx;
        font-weight: 600;
        color: #f0250e;
      }
      > view:nth-child(2) {
        font-size: 22rpx;
        color: #8c8c8c;
      }
    }
  }
  .note {
    position: relative;
    padding: 15rpx 30rpx;
    border-top: 1px dashed #ededed;
    &::after {
      content: "";
      position: absolute;
      left: -10rpx;
      top: -10rpx;
      width: 20rpx;
      height: 20rpx;
      background: $bgcolor;
      border-radius: 50%;
    }
    &::before {
      content: "";
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      width: 20rpx;
      height: 20rpx;
      background: $bgcolor;
      border-radius: 50%;
    }
    .left {
      flex: 1;
      width: 0;
      .share-info {
        display: flex;
        align-items: center;
        text {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .user-info {
          display: flex;
          align-items: center;
          image {
            width: 56rpx;
            height: 56rpx;
            background: #f7f2f4;
            border: 4rpx solid #ffffff;
            border-radius: 50%;
            display: block;
            margin-right: 8rpx;
          }
          text {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #262626;
          }
        }
      }
    }
    // 按钮
    .btn-groups {
      margin-left: 10rpx;
      display: flex;
      justify-content: flex-end;
      view {
        position: relative;
        width: 144rpx;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        text-align: center;
        border-radius: 24rpx;
        margin-left: 10rpx;
      }
      .use-btn {
        background: #f0250e;
        color: #fff;
        button {
          opacity: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
        }
      }
      .go-with {
        background: #fee8e6;
        color: #f0250e;
      }

      .share-btn {
        background: #ffffff;
        border: 2rpx solid #999999;
        color: #191919;
        position: relative;
        button {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 11;
          opacity: 0;
        }
      }
    }
  }
  .status {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10rpx;

    border-radius: 0px 20rpx 0px 12rpx;
    line-height: 28rpx;
    font-size: 20rpx;
    font-weight: 400;
    color: #f0250e;
    background: #fee8e6;
  }
  .disabled {
    background: #c8c8c8;
    color: #ffffff;
  }
}

.use-less {
  .date-price {
    opacity: 0.4;
    .price-box > view:nth-child(1) {
      color: rgba(200, 200, 200, 1);
    }
    > view:nth-child(1) .title {
      color: rgba(200, 200, 200, 1);
    }
    > view:nth-child(1) .date {
      color: #c8c8c8;
    }
  }
  .note {
    .left {
      .share-info {
        text {
          color: #c8c8c8;
        }
        .user-info {
          text {
            color: #c8c8c8;
          }
        }
      }
    }
  }
  .disabled {
  }
}
</style>
